/* eslint-disable consistent-return */
import React from 'react';
import { Modal, Table, message } from 'antd';

export default class DetailModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedRows: [] };
  }

  // 提交选择的发票或者邮寄地址数据
  saveInvOrMail = () => {
    const { saveInvOrMail } = this.props;
    const { selectedRows } = this.state;
    if (!selectedRows.length) {
      return message.warning('请选择一条数据！');
    }
    this.setState({ selectedRows: [] }, () => {
      saveInvOrMail(selectedRows[0]);
    });
  };

  render() {
    const {
      modalVisible,
      handleModalVisible,
      loading,
      invMailData,
      invMailType = '1',
      sysCode = 1,
      selectMailLoading,
    } = this.props;
    const { selectedRows } = this.state;
    const columnsInv = [
      {
        title: '单位名称',
        dataIndex: 'vatCoprName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '纳税人识别号',
        dataIndex: 'taxerIdNo',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '开户行',
        dataIndex: sysCode === 1 ? 'bankOfDepoName' : 'openBank',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text && text) || '--',
      },

      {
        title: '单位地址',
        dataIndex: sysCode === 1 ? 'invAddr' : 'invArea',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text && text) || '--',
      },
      {
        title: '电话',
        dataIndex: 'invPhone',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        render: text => (text && text) || '--',
      },
      {
        title: '银行账号',
        dataIndex: 'bankAcco',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    const columnsMail = [
      {
        title: '收件人',
        dataIndex: 'contPerName',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '联系人电话',
        dataIndex: 'contPerPhone',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '邮寄地址',
        dataIndex: 'mailArea',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
      {
        title: '详细地址',
        dataIndex: 'mailAddr',
        align: 'center',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
      },
    ];
    return (
      <Modal
        width={1200}
        title={`选择发票${invMailType === '1' ? '抬头' : '邮寄地址'}`}
        visible={modalVisible}
        onOk={this.saveInvOrMail}
        onCancel={() => handleModalVisible(false)}
        destroyOnClose
        confirmLoading={modalVisible && selectMailLoading}
      >
        <Table
          selectedRows={selectedRows}
          onSelectRow={record => {
            this.setState({ selectedRows: record });
          }}
          loading={loading}
          dataSource={invMailData}
          rowKey={invMailType === '1' ? 'invId' : 'mailAddrId'}
          columns={invMailType === '1' ? columnsInv : columnsMail}
          rowSelection={{
            type: 'radio',
          }}
          pagination={false}
          onRow={record => ({
            onClick: e => {
              e.stopPropagation();
              e.currentTarget.getElementsByClassName('ant-radio-wrapper')[0].click();
              this.setState({ selectedRows: [record] });
            },
          })}
        />
      </Modal>
    );
  }
}
